<template>
  <Modal v-model="show" width="500px" class-name="vertical-center-modal" :mask-closable="false">
    <!-- 页头 -->
    <div slot="header"></div>
    <!-- 内容 -->
    <div v-if="show" style="padding: 60px 0 30px 0;" class="ff-regular">
			<img v-if="payType == 'apple'" class="pays-icon" src="@/assets/images/public/apple-pay-icon.png"></img>
			<img v-if="payType == 'google'" class="pays-icon" src="@/assets/images/public/google-pay-icon.png"></img>
			<div class="hub-title">
				{{$t(payType == 'apple' ? 'estimation.useApplePay' : 'estimation.useGooglePay')}}
			</div>
			<div v-if="showProgress">
				<div class="hub-progress">
					<Progress :percent="percent" stroke-color="#333" :stroke-width="10" hide-info/>
				</div>
				<div class="hub-sub">
					{{$t('estimation.paymentSeconds')}}
				</div>
			</div>
			<div class="hub-frame">
				<iframe src="/static/airwallex.html" width="100%" height="68px" frameborder="0" scrolling="no"></iframe>
			</div>
    </div>
    <!-- 底部 -->
    <div slot="footer"></div>
  </Modal>
</template>
<script>
export default {
  data() {
    return {
      show: false,
			showProgress:true,
			payType:'',
			percent:0,
    };
  },
  mounted() {
    let that = this;
    window.addEventListener('message', function (e) {
      if (e.data.airwallexMsg) {
        setTimeout(() => {
          that.$emit('airwallexSuccess', e.data.airwallexMsg);
          that.show = false;
        }, 500)
      }
      if (e.data.airwallexError) {//错误
        setTimeout(() => {
          that.show = false;
          that.$Message.error(that.$t('pay.otherPayError'))
        }, 500)
      }
			if(e.data.airwallexReady){//拉起成功
				setTimeout(()=>{
					that.showProgress = false;
					that.percent = 0;
				},100)
			}
    }, false);
  },
  methods: {
    open(payType) {
			this.percent = 0;
			this.payType = payType;
      this.show = true;
			this.showProgress = true;
			this.addProgress();
    },
		addProgress(){
			if(this.percent < 99){
				setTimeout(()=>{
					this.percent++;
					this.addProgress();
				},30)
			}
		}
  }
};
</script>
<style lang="less" scoped>
:deep(.ivu-modal-header) {
  border: none;
  padding: 0;
}

:deep(.ivu-modal-body) {
  padding: 0;
}

:deep(.ivu-modal-footer) {
  border: none;
  padding: 0;
}

.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pays-icon{
	width: 436px;
	height: 176px;
	display: block;
	margin: auto;
}
.hub-title{
	text-align: center;
	color: #1E1714;
	font-size: 20px;
	line-height: 28px;
	font-weight: bold;
}
.hub-sub{
	width: 366px;
	margin: auto;
	margin-top: 16px;
	color: #AEB0B9;
	font-size: 16px;
	line-height: 22px;
	text-align: center;
}
.hub-progress{
	width: 324px;
	overflow: hidden;
	margin: auto;
	margin-top: 28px;
}
.hub-frame{
	width: 366px;
	margin: auto;
	margin-top: 16px;
}
</style>
